echarts 图标点击案例 |
您所在的位置：网站首页 › echarts 点击 › echarts 图标点击案例 |
|
一、在设置图表信息里面设置点击事件
/*设置图标属性信息*/
drawChart () {
console.log('2')
this.charts =echarts.init(document.getElementById('mydataServiceCountTrend'), 'westeros')
this.charts.off('click');
this.charts.setOption({
backgroundColor: '#fff',
title: {
text: '各时间段数据使用情况',
top: 'top',
left: 'center',
textStyle: {
color: '#999',
fontSize: 18
}
},
legend: {
orient: 'vertical',
backgroundColor: "#FAFAFA",
bottom: '5%',
left: '5%',
/*data: this.deptLegend,*/
},
grid: {
top: '15%',
left: '8%',
right: '10%',
bottom: '15%',
// containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(0, 255, 233,0)'
}, {
offset: 0.5,
color: 'rgba(255, 255, 255,1)',
}, {
offset: 1,
color: 'rgba(0, 255, 233,0)'
}],
global: false
}
},
},
},
xAxis: [{
interval: 0,//显示x轴显示完整
name:this.dateShow,
type: 'category',
data:this.xAxisText,
axisLine: {
lineStyle: {
color: 'red'
}
},
axisTick: {
show: false
},
axisLabel: {
/*interval: 0, 显示所有x轴*/
textStyle: {
color: 'black'
},
margin: 15
},
boundaryGap: false,
minInterval : 1,
boundaryGap : [ 0, 0.1 ]
}],
dataZoom: [{
type: 'slider',
show: this.zoomShow, //flase直接隐藏图形
xAxisIndex: [0],
left: '9%', //滚动条靠左侧的百分比
bottom: -10,
start: 0,//滚动条的起始位置
end: this.endValue, //滚动条的截止位置（按比例分割你的柱状图x轴长度）
zoomLock: true, //控制面板是否进行缩放
}],
yAxis: [{
name:'次数',
type: 'value',
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: 'black'
}
},
axisLabel: {
textStyle: {
color: 'black'
}
},
splitLine: {
show: false
},
minInterval : 1,
boundaryGap : [ 0, 0.1 ],
}],
series: [ {
type: 'line',
data: this.ServicesCalledNumTrend,
symbolSize: 6,
symbol: 'circle',
smooth: true,
lineStyle: {
color: '#9E87FF'
},
itemStyle: {
normal: {
color: '#9E87FF',
borderColor: '#9E87FF'
}
},
//显示折线上文字
label: {
show: true,
position: 'top',
textStyle: {
color: '#6c50f3',
}
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#9E87FFb3'
},
{
offset: 1,
color: '#9E87FF03'
}
])
},
emphasis: {
itemStyle: {
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0,
color: '#9E87FF'
},
{
offset: 0.4,
color: '#9E87FF'
},
{
offset: 0.5,
color: '#fff'
}, {
offset: 0.7,
color: '#fff'
}, {
offset: 0.8,
color: '#fff'
}, {
offset: 1,
color: '#fff'
}
]
},
borderColor: '#9E87FF',
borderWidth: 2
}
}
}
]
})
//图表点击事件
let that=this;
this.charts.on('click', function (params) {
that.dialogTableVisible = true;
that.saveParams=params;
that.getServicesCalledNumTrendDetail(that.saveParams);
})
window.onresize = this.charts.resize
},
关键代码： this.charts.on('click', function (params) { }) 发现问题：会多次调用点击事件？解决：echarts 点击事件，在图表重新渲染后会累加点击事件，解决方法是在渲染前关闭点击事件，跟计时器一样 ，解决重复点击会多次累加问题关键代码：this.myChart.off(‘click’) // 点击之前先关闭！！解决重复点击 放在这个代码：this.myChart.setOption({}）前面 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |